<template>
  <t-layout class="wh-full">
    <t-header style="flex-grow:0;flex-shrink: 0; border-bottom: 1px solid var(--td-border-level-1-color);">
      <home-header/>
    </t-header>
    <t-layout style=" flex:1; height: 0; ">
      <t-aside :width="sideWidth"
               style="flex-grow:0;flex-shrink: 0;border-right: 1px solid var(--td-border-level-1-color)">
        <home-side/>
      </t-aside>
      <t-layout style="flex: 1;width: 0; overflow: auto;border-left: 1px solid var(--td-border-level-1-color)">
        <t-content>
          <home-content/>
        </t-content>
        <t-footer class="!p2">
          <home-footer/>
        </t-footer>
      </t-layout>
    </t-layout>
  </t-layout>
</template>

<script setup lang="ts">
import HomeFooter from "@/views/home/components/home-footer.vue";
import HomeHeader from "@/views/home/components/home-header.vue";
import HomeSide from "@/views/home/components/home-side.vue";
import HomeContent from "@/views/home/components/home-content.vue";
import {useAppStore} from "@/store/modules/app";
import {computed} from "vue";
import {useAuthStore} from "@/store/modules/auth";
import {getUserInfo} from "@/service/api/self.ts";
import type {Ret} from "@/typings/api";
import type {UserInfo} from "@/typings/auth";
import {addRouter} from "@/router";

const appStore = useAppStore();
const authStore = useAuthStore();

const sideWidth = computed(() => appStore.sideCollapse ? '64px' : '232px')

getUserInfo().then((res: Ret<UserInfo>) => {
  if (res.code === 0) {
    authStore.userInfo = res.data.user;
    authStore.permissions = res.data.permissions;
    authStore.loadRouter = false;
    // 加载路由
    addRouter();
  }
})
</script>

<style lang="scss" scoped>
</style>